<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-input placeholder="请输入用户名" v-model="queryInfo.name">
                            <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible = true">
                            新增用户</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-table :data="userList" border style="width: 100%">
                            <el-table-column type="index" />
                            <el-table-column prop="id" label="ID" />
                            <el-table-column prop="name" label="用户名" />
                            <el-table-column prop="nick_name" label="名称" />
                            <el-table-column prop="phone" label="电话" />
                            <el-table-column prop="email" label="邮箱" />
                            <el-table-column prop="role_name" label="角色名称" />
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <!-- 重置删除修改按钮 -->
                                    <el-button type="primary" icon="el-icon-edit" circle @click="showEdit(scope.row)">
                                    </el-button>
                                    <el-button type="warning" icon="el-icon-refresh" circle @click="showReset(scope.row)">
                                    </el-button>
                                    <el-button type="danger" icon="el-icon-delete" circle @click="showDel(scope.row)">
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[1, 2, 3, 5]" :page-size="queryInfo.psize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>
        <!-- 添加用户的窗口 -->
        <el-dialog title="新增用户" width="30%" :visible.sync="addDialogVisible" :before-class="addFormClose">
            <el-form ref="addFormRef" :rules="addFormRules" :model="addForm" label-width="80px">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nick_name">
                    <el-input v-model="addForm.nick_name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="addForm.pwd"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="real_pwd">
                    <el-input v-model="addForm.real_pwd"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                <el-select v-model="addForm.role_name" placeholder="请选择角色">
                    <el-option :label="r.name" :value="r.id" v-for="r in roles" :key='r.id'></el-option>
                </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addFormClose">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改用户窗口 -->
        <el-dialog
        title="编辑用户"  :visible.sync="editDialogVisible" width="30%" :before-close="editFormClose">
        <el-form ref="editFormRef" :rules="editFormRules" :model="editForm" label-width="80px">
            <el-form-item label="账号" prop="name">
            <el-input v-model="editForm.name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nick_name">
            <el-input v-model="editForm.nick_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
            <el-input v-model="editForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="角色">
            <el-select v-model="editForm.role_name" placeholder="请选择角色">
                <el-option :label="r.name" :value="r.id" v-for="r in roles" :key='r.id'></el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUser">确 定</el-button>
        </span>
        </el-dialog>
        <!-- 重置密码的窗口 -->
        <el-dialog title="删除用户" width="30%" :visible.sync="resetDialogVisible">
            <span>确认重置账户{{ reset_name }}昵称{{ reset_nick_name }}的密码吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ResetUser">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除窗口 -->
        <el-dialog title="删除用户" width="30%" :visible.sync="delDialogVisible">
            <span>确认删除账户{{ del_name }}昵称{{ del_nick_name }}的用户吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="delUser">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>

export default {
    data() {
        const validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.addForm.pwd) {
                callback(new Error("两次输入密码不一致！"))
            } else {
                callback()
            }
        }
        const validatePhone = (rule, value, callback) => {
            // 定义一个正则来验证手机号是否有效
            var phoneReg = /^0?(13|14|15|16|17|)[0-9]{9}$/
            if (phoneReg.test(value)) {
                return callback()
            }
            return callback(new Error("请输入有效的手机号"))
        }
        const validateemail = (rule, value, callback) => {
            // 定义一个正则来验证邮箱是否有效
            var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            if (emailReg.test(value)) {
                return callback()
            }
            return callback(new Error("请输入有效的邮箱"))
        }
        return {
            userList: [],
            queryInfo: {
                name: '',
                pnum: 1,
                psize: 2,
            },
            total: 0,
            addDialogVisible: false,
            editDialogVisible: false,
            delDialogVisible: false,
            resetDialogVisible: false,
            addForm: {},
            editForm: {},
            del_name: '',
            del_nick_name: '',
            del_id: 0,
            reset_name: '',
            reset_nick_name: '',
            reset_id: 0,
            roles : [],
            addFormRules: {
                name: [
                    { required: true, message: "请输入手机号", trigger: "blur" },
                    { min: 2, max: 8, message: '长度在2-8之间', trigger: "blur" }
                ],
                nick_name: [
                    { required: true, message: "请输入昵称", trigger: "blur" },
                    { min: 2, max: 8, message: '长度在2-8之间', trigger: "blur" }
                ],
                pwd: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 2, message: '必须大于2', trigger: "blur" }
                ],
                real_pwd: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { validator: validatePass2, trigger: "blur" }
                ],
                phone: [
                    { validator: validatePhone, trigger: "blur" }
                ],
                email: [
                    { validator: validateemail, trigger: "blur" }
                ]
            },
            editFormRules: {
                phone: [
                    { validator: validatePhone, trigger: "blur" }
                ],
                email: [
                    { validator: validateemail, trigger: "blur" }
                ]
            }
        }
    },
    created() {
        this.getUserList()
        this.getRole()
    },
    methods: {
        async getUserList() {
            const { data: res } = await this.$axios.get("/api/user/user_list", { params: this.queryInfo })
            if (res.status !== 200) return this.$msg.error(res.msg)
            this.total = res.data.totalPage
            this.userList = res.data.users
            // console.log(res.data.users);
        },
        handleSizeChange(val) {
            this.queryInfo.psize = val
            this.getUserList()
        },
        handleCurrentChange(val) {
            this.queryInfo.pnum = val
            this.getUserList()
        },
        searchUser() {
            this.queryInfo.pnum = 1
            this.getUserList()
        },
        addFormClose() {
            //重置增加用户列表
            this.$refs.addFormRef.resetFields()
            this.addDialogVisible = false
        },
        editFormClose() {

        },
        // 增加用户
        addUser() {
            // 发送请求之前，验证数据是否规范
            this.$refs.addFormRef.validate(async valid => {
                if (!valid) return
                // 发送请求 
                const { data: res } = await this.$axios.post('/api/user/user/', this.$qs.stringify(this.addForm))
                // 验证结果
                if (res.status !== 200) return this.$msg.error(res.msg)
                this.$msg.success(res.msg)
                // 隐藏窗口 
                this.addDialogVisible = false
                // 初始化表单
                this.$refs.addFormRef.resetFields()
                // 重新获取用户列表
                this.getUserList()
            })
        },
        // 显示编辑用户窗口
        async showEdit(row) {
            // this.editForm = row
            // 发送请求，获取后台实时数据
            const { data: res } = await this.$axios.get('/api/user/user/', { params: { id: row.id } })
            if (res.status !== 200) return this.$msg.error(res.msg)
            this.editForm = res.data
            // 显示窗口
            this.editDialogVisible = true
        },
        // 编辑用户
        editUser() {
            this.$refs.editFormRef.validate(async valid => {
                if (!valid) return
                const { data: res } = await this.$axios.put('/api/user/user/', this.$qs.stringify(this.editForm))
                if (res.status !== 200) return this.$msg.error(res.msg)
                this.$msg.success(res.msg)
                this.editDialogVisible = false
                // 重新获取用户列表
                this.getUserList()
            })
        },
        // 显示删除窗口
        showDel(row) {
            this.del_id = row.id
            this.del_name = row.name
            this.del_nick_name = row.nick_name
            this.delDialogVisible = true
        },
        // 删除用户
        async delUser() {
            const { data: res } = await this.$axios.delete('/api/user/user/', { data: { id: this.del_id } })
            if (res.status !== 200) return this.$msg.error(res.msg)
            this.$msg.success(res.msg)
            this.delDialogVisible = false
            // 重新获取用户列表
            this.getUserList()
        },
        // 显示重置窗口
        showReset(row) {
            this.reset_id = row.id
            this.reset_name = row.name
            this.reset_nick_name = row.nick_name
            this.resetDialogVisible = true
        },
        // 重置密码
        async ResetUser() {
            const { data: res } = await this.$axios.get("/api/user/reset", { params: { id: this.reset_id } })
            if (res.status !== 200) return this.$msg.error(res.msg)
            this.$msg.success(res.msg)
            this.resetDialogVisible = false
        },
        // 获取所有角色
        async getRole() {
            const { data:res } = await this.$axios.get("/api/role")
            if (res.status !== 200) return this.$msg.error(res.msg)
            this.roles = res.data
            console.log(this.roles);
        }
    }
}


</script>

<style lang="less" scoped>
.el-table {
    margin-top: 10px;
}
</style>
